<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div>
        <el-card style="width: 100%; margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>设备详情</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="设备名称">{{ device?.deviceName }}</el-descriptions-item>
            <el-descriptions-item label="设备型号">{{ device?.deviceModel }}</el-descriptions-item>
            <el-descriptions-item label="设备编码">{{ device?.deviceSn }}</el-descriptions-item>
            <el-descriptions-item label="厂商">{{ device?.manufacturer }}</el-descriptions-item>
            <el-descriptions-item label="安装位置">{{ device?.installLocation }}</el-descriptions-item>
            <el-descriptions-item label="所属区域">{{ device?.area }}</el-descriptions-item>
            <el-descriptions-item label="负责人">{{ device?.principal }}</el-descriptions-item>
            <el-descriptions-item label="设备类型">pc</el-descriptions-item>
            <el-descriptions-item label="关联传感器/控制器ID">{{ device?.relatedSensorControllerId }}</el-descriptions-item>
            <el-descriptions-item label="当前状态">
              <el-tag :type="handleStatus(device?.status).type">{{ handleStatus(device?.status).label }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="width: 100%; margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>参数详情</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="阀门开度">2度</el-descriptions-item>
            <el-descriptions-item label="水泵流量">10 L/m</el-descriptions-item>
            <el-descriptions-item label="传感器读数">80</el-descriptions-item>
            <el-descriptions-item label="温湿度">80%</el-descriptions-item>
            <el-descriptions-item label="CO2">40%</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="width: 100%; margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>告警信息</span>
            </div>
          </template>
          <el-table v-loading="loading2" :data="devicealarmList">
            <el-table-column label="设备ID" align="center" prop="deviceId" />
            <el-table-column label="设备名称" align="center" prop="deviceName" />
            <el-table-column label="故障描述" align="center" prop="faultDescription" />
            <el-table-column label="故障等级" align="center" prop="faultLevel"
              ><template #default="scope">
                <div>{{ getLevel(scope.row.faultLevel) }}</div>
              </template>
            </el-table-column>

            <el-table-column label="故障类型" align="center" prop="faultType" />
            <!-- <el-table-column label="处理人" align="center" prop="handler" /> -->
            <el-table-column label="报警时间" align="center" prop="alarmTime" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="确认人" align="center" prop="confirmer" />
            <el-table-column label="确认时间" align="center" prop="confirmTime" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.confirmTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="处理时间" align="center" prop="handleTime" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template #default="scope">
                <span>{{ scope.row.status ? '已确认' : '未确认' }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total2 > 0"
            :total="total2"
            v-model:page="queryParams2.pageNum"
            v-model:limit="queryParams2.pageSize"
            @pagination="getlistAlarmInfo"
          />
        </el-card>
        <el-card style="width: 100%; margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span>启停历史</span>
            </div>
          </template>
          <el-table v-loading="loading" :data="deviceStartList">
            <el-table-column label="设备ID" align="center" prop="deviceId" />
            <el-table-column label="设备名称" align="center" prop="deviceName" />
            <el-table-column label="操作人员" align="center" prop="operName" />
            <el-table-column label="操作时间" align="center" prop="operTime" />
            <el-table-column label="操作描述" align="center" prop="description" />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script setup name="DeviceDeatil" lang="ts">
import { getDeviceInfo, deviceLog } from '@/api/device/configuration/index';
import { DeviceInfoVO, DeviceInfoQuery, DeviceInfoForm } from '@/api/device/configuration/types';
import { listAlarmInfo } from '@/api/device/alarmInfo/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();

const id = ref();
const device = ref();

const deviceStartList = ref([]);
const devicealarmList = ref([]);
const loading = ref(false);
const loading2 = ref(false);
const total = ref(0);

const total2 = ref(0);

const queryParams = ref({ pageNum: 1, pageSize: 10 });

const queryParams2 = ref({ pageNum: 1, pageSize: 10, deviceId: route.query.id as string });

const getList = async () => {
  loading.value = true;
  const res = await deviceLog({ deviceId: id.value });
  deviceStartList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

const getlistAlarmInfo = async () => {
  loading2.value = true;
  const res = await listAlarmInfo(queryParams2.value);
  devicealarmList.value = res.rows;
  total2.value = res.total;
  loading2.value = false;
};

const getLevel = (level: number) => {
  switch (level) {
    case 1:
      return '一般';
    case 2:
      return '严重';
    case 3:
      return '紧急';
    default:
      return '紧急';
  }
};

/** 修改按钮操作 */
const handleUpdate = async (row?: DeviceInfoVO) => {
  const res = await getDeviceInfo(id.value);
  device.value = res.data;
};

const handleStatus = (status?: number) => {
  switch (status) {
    case 1:
      return { type: 'success', label: '运行中' };
    case 2:
      return { type: 'danger', label: '停止' };
    case 3:
      return { type: 'warning', label: '故障' };
    case 0:
      return { type: 'info', label: '未连接' };
    default:
      return { type: 'danger', label: '停止' };
  }
};

onMounted(() => {
  id.value = route.query.id;
  handleUpdate();
  getList();
  getlistAlarmInfo();
});
</script>
<style lang="scss" scoped></style>
